<template>
  <!-- 新闻列表 -->
  <div class="px-4 py-16 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8 lg:py-20">
    <div class="mb-10 -t -b divide-y">
      <div style="border-bottom:2px solid  black">
        <h2>新闻资讯</h2>
      </div>
      <div v-if="news != null" v-for="item in news" class="grid py-8 sm:grid-cols-4 "
        style="border: none;border-bottom: 1px solid #eee;">
        <div class="mb-4 sm:mb-0">
          <div class="space-y-1 text-xs font-semibold tracking-wide uppercase">
            <a @click="butinfo(item.message_id)"
              class="transition-colors duration-200 text-deep-purple-accent-400 hover:text-deep-purple-800"
              aria-label="Category">{{ item.title }}</a>
            <p class="text-gray-600">{{ item.created_at }}</p>
          </div>
        </div>
      </div>
      <div v-if="news == null" class="grid py-8 sm:grid-cols-4" style="border: none">
        <div class="mb-4 sm:mb-0">
          <div class="space-y-1 text-xs font-semibold tracking-wide uppercase">
            <p>暂无内容</p>
          </div>
        </div>
      </div>
      <div style="border: none;border-bottom:2px solid  black">
        <h2>官方公告</h2>
      </div>
      <div v-for="item in notice" class="grid py-8 sm:grid-cols-4" style="border: none;border-bottom: 1px solid #eee;">
        <div class="mb-4 sm:mb-0">
          <div class="space-y-1 text-xs font-semibold tracking-wide uppercase">
            <a @click="butinfo(item.message_id)"
              class="transition-colors duration-200 text-deep-purple-accent-400 hover:text-deep-purple-800"
              aria-label="Category">{{ item.title }}</a>
            <p class="text-gray-600">{{ item.created_at }}</p>
          </div>
        </div>
      </div>
      <div v-if="notice == null" class="grid py-8 sm:grid-cols-4" style="border: none">
        <div class="mb-4 sm:mb-0">
          <div class="space-y-1 text-xs font-semibold tracking-wide uppercase">
            <p>暂无内容</p>
          </div>
        </div>
      </div>
      <div style="border: none;border-bottom:2px solid  black">
        <h2>官方政策</h2>
      </div>
      <div v-for="item in policy" class="grid py-8 sm:grid-cols-4" style="border: none;border-bottom: 1px solid #eee">
        <div class="mb-4 sm:mb-0">
          <div class="space-y-1 text-xs font-semibold tracking-wide uppercase">
            <a @click="butinfo(item.message_id)"
              class="transition-colors duration-200 text-deep-purple-accent-400 hover:text-deep-purple-800"
              aria-label="Category">{{ item.title }}</a>
            <p class="text-gray-600">{{ item.created_at }}</p>
          </div>
        </div>
      </div>
      <div v-if="policy == null" class="grid py-8 sm:grid-cols-4" style="border: none">
        <div class="mb-4 sm:mb-0">
          <div class="space-y-1 text-xs font-semibold tracking-wide uppercase">
            <p>暂无内容</p>
          </div>
        </div>
      </div>
    </div>
    <div class="text-center">
      <a @click="getinfo()" aria-label=""
        class="inline-flex items-center font-semibold transition-colors duration-200 text-deep-purple-accent-400 hover:text-deep-purple-800">
        查看更多
        <svg class="inline-block w-3 ml-2" fill="currentColor" viewBox="0 0 12 12">
          <path
            d="M9.707,5.293l-5-5A1,1,0,0,0,3.293,1.707L7.586,6,3.293,10.293a1,1,0,1,0,1.414,1.414l5-5A1,1,0,0,0,9.707,5.293Z">
          </path>
        </svg>
      </a>
    </div>
  </div>
</template>

<script setup>
import { getMessageList, getMessage } from "@/api/message";
import { onMounted, ref } from "vue";
import { useRouter } from 'vue-router';


onMounted(async () => {
  await getnotice()
  await getnews()
  await getpolicy()
})
// 官方公告
const notice = ref(null);

const getnotice = async () => {
  await getMessageList({ count: 5, page: 1, message_type: '官方公告' }).then((res) => {
    if (res.data.data.length != 0) {
      notice.value = res.data.data;
    }
  })
}
//新闻咨询
const news = ref(null);
const getnews = async () => {
  await getMessageList({ count: 5, page: 1, message_type: '新闻资讯' }).then((res) => {
    if (res.data.data.length != 0) {
      news.value = res.data.data;
    }


  })
}
// 官方政策
const policy = ref(null)
const getpolicy = async () => {
  await getMessageList({ count: 5, page: 1, message_type: '官方政策' }).then((res) => {
    if (res.data.data.length != 0) {
      policy.value = res.data.data;
    }

  })
}
// 点击访问
const router = useRouter()
const butinfo = (id) => {
  router.push(`/home/bulletin?message_id=${id}`)
}

// 查看更多
const getinfo = () => {
  router.push('/news/ofan')
}

</script>

<style lang="scss" scoped></style>
